useCallback vs useEffect

useCallback

useCallback은 보통 useMemo와 같이 성능 최적화를 위해서 같이 사용함
useCallback은 리렌더링 간에 함수 정의를 캐싱해 주는 React Hook입니다. 라는 게 공식 문서의 설명
일반적으로 캐싱의 목적을 가지고 있는 아이임.
보는 것과 같이 useEffect과 비슷하게 생겼지만 하는 일이 많이 다름

import { useMemo, useCallback } from 'react';  

function ProductPage({ productId, referrer }) {  
	const product = useData('/product/' + productId);  
	const requirements = useMemo(() => { // 함수를 호출하고 그 결과를 캐싱합니다.  
		return computeRequirements(product);  
	}, [product]);  
	
	const handleSubmit = useCallback((orderDetails) => { // 함수 자체를 캐싱합니다.  
		post('/product/' + productId + '/buy', {  
			referrer,  
			orderDetails,  
		});  
	}, [productId, referrer]);  
	
	return (  
	<div className={theme}>  
		<ShippingForm requirements={requirements} onSubmit={handleSubmit} />  
	</div>  
	);  
}

그럼 useMemo와는 뭐가 다르냐 무엇을 캐싱하느냐의 차이
useMemo : 값
useCallback : 함수
리렌더링이 안 일어나게 해주는 목적을 가지고 있음

useEffect

그에 반해 useEffect는 어떠한 값이 변경될 때 원하는 타이밍에 내가 원하는 로직을 실행할 수 있게끔 하게 쓰인다
useEffect는 외부 시스템과 컴포넌트를 동기화하는 React Hook입니다. 게 공식 문서의 설명임
실제로는 굉장히 다양한 부분에서 쓰여서 어떤 역할은 담당한다고 보기 애매하긴 한데
useState와 같이 사용되어 변수가 변경되었을 때 관련 로직이 실행되며 rerendering이 일어나게 할 수도 있고 동기함수에서 api를 가져오기 위해서도 사용되기도 함

이 글을 작성한 이유중에 하나인데 실행 순서 또한 조금 다름
useEffect는 첫 랜더링이 일어난 후에 실행되는 반면 useCallback은 랜더링 중에 실행됨
따라서 mount 전에 실행해야되는 것들이 있으면 useCallback으로 useEffect의 역할을 대신할 수도 있음